<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<style>
    #title {
        width: 400px;
        height: 20px;
    }


</style>
<pre>

    放假? 放什么假!
    只有对社会没有用的人才会放假 !
    像我这样国家栋梁之才 , 怎么可能会放假 !

                               ------来自同桌

</pre>

<body>

<div style="margin: 0 auto; width: 700px;height: 500px;text-align: center;background-color:lightgray">
    <h2>搜一搜</h2>
    <strong>输入搜索的关键字</strong><input type="text" id="title" name="title" value="" autocomplete="off">
    <input type="button" value="搜一搜">
    <div style="width: 405px;margin-left: 180px;border: 1px solid;text-align:left;display: none" id="showKeyWord"></div>
</div>

</body>

<script>


    $(function () {

        $("#title").keyup(function () {
            var keyword = $("#title").val();
            if (keyword != "") {

                $.ajax({
                    url: "BordServlet",
                    type: "POST",
                    data: {
                        keyword: keyword
                    },
                    dataType: "json",
                    success: function (rel) {
                        var $big = $("#showKeyWord");
                        $big.html("");
                        var small = "";
                        if (rel.length > 0) {
                            console.log(rel);
                            $.each(rel, function (i, n) {
                                small += "<div class='abc'>";
                                small += n;
                                small += "</div>";
                            });
                            $big.html(small).css("display", "block");
                        } else {
                            $big.css("display", "none");
                        }
                    }
                });

            } else {
                $("#showKeyWord").css("display", "none");
            }


        });

        //鼠标滑入
        $(".abc").live("mouseover", function () {
            $(this).css("backgroundColor", "#4CD360");
            $(this).css("cursor", "pointer");
        });
        //鼠标滑出
        $(".abc").live("mouseout", function () {
            $(this).css("backgroundColor", "");
        });
        //选中写入文本框中
        $(".abc").live("click", function () {
            $("#title").val($(this).html());
            $("#showKeyWord").css("display", "none");
        });
    })


</script>

</html>